<div class="runMontior-main-hook main-hook">
    <div class="box-wrapper box1-hook">
        <div class="buy-wrapper buy-hook">
            <div class="title">
                当前位置：<span class="active">运行监控</span>
            </div>
            <div class="inner-wrapper" style="width:100%;margin:0;border:none;">
                <div class="distribution_tree ztree"  style="width:25%;position:relative;height:670px;overflow: auto;padding-bottom: 0;margin-top: 10px;">
                    <div id="runMontior_tree" style="height:420px;overflow:auto;"></div>
                    <div class="add_hide" id="add_hide">
                        <ul class="group_list">
                            <!--<li class="clearfix"><span>临时组A</span><button class="btn btn-red">删除</button><button class="btn btn-blue">详细</button></li>-->
                           <!-- <li class="clearfix"><span>临时组A</span><button class="btn btn-red">删除</button><button class="btn btn-blue">详细</button></li>
                            <li class="clearfix"><span>临时组A</span><button class="btn btn-red">删除</button><button class="btn btn-blue">详细</button></li>
                            <li class="clearfix"><span>临时组A</span><button class="btn btn-red">删除</button><button class="btn btn-blue">详细</button></li>
                            <li class="clearfix"><span>临时组A</span><button class="btn btn-red">删除</button><button class="btn btn-blue">详细</button></li>
                            <li class="clearfix"><span>临时组A</span><button class="btn btn-red">删除</button><button class="btn btn-blue">详细</button></li>
                            <li class="clearfix"><span>临时组A</span><button class="btn btn-red">删除</button><button class="btn btn-blue">详细</button></li>
                            <li class="clearfix"><span>临时组A</span><button class="btn btn-red">删除</button><button class="btn btn-blue">详细</button></li>-->
                        </ul>
                        <button class="btn primary_btn" style="padding: 8px 20px;" @click.stop ="temGroup()" :disabled = "!clickAble">新建临时分组</button>
                    </div>
                </div>
                <div class="distribution_map"  style="width:71%;height:670px;position: relative;padding-bottom: 0;margin-top: 10px; ">
                    <div class="search">
                        <form class="search-hook">
                            <div class="row">
                                <span class="search-label">单灯状态</span>
                                <select class="form-control w80" name="lightStatus">
                                    <option value="">全部</option>
                                    <option v-for="(type,index) in lightStatus" :value="type.id" v-text="type.name"></option>
                                </select>
                                <span class="interval-lg"></span>
                                <span class="search-label">故障类型</span>
                                <select class="form-control w120" name="faultType">
                                    <option value="">全部</option>
                                    <option v-for="(type,index) in faultType  " :value="type.id" v-text="type.name"></option>
                                </select>
                                <span class="interval-lg"></span>
                                <span class="search-label">通讯正常</span>
                                <select class="form-control w120" name="message">
                                    <option value="">全部</option>
                                    <option v-for="(type,index) in message  " :value="type.id" v-text="type.name"></option>
                                </select>
                            </div>
                            <div class="row">
                                <select class="form-control w120" name="idNum">
                                    <option v-for="(type,index) in idNum  " :value="type.id" v-text="type.name"></option>
                                </select>
                                <span class="interval-xs"></span>
                                <input type="text" class="search-input lg" name="keyword"   @keyup.enter ="searchForm()">
                                <span class="interval-lg"></span>
                                <button type="button" class="btn btn-blue" id="search-btn" @click.stop="searchForm()">查询</button>
                                <span class="interval-xs"></span>
                                <button type="reset" class="btn btn-gray resert">清空</button>
                            </div>
                        </form>
                    </div>
                    <div id="runMontior_map" style="height: 550px;"></div>
                    <div class="detail_tem">
                        <h4>
                            <a class="close_btn" @click.stop ="closeDetail()">X</a>
                        </h4>
                        <table>
                            <thead>
                            <th>单灯名称</th>
                            <th>单灯编号</th>
                            <th>操作</th>
                            </thead>
                            <tbody v-for="item in temList">
                            <tr>
                                <td v-text="item.lambName"></td>
                                <td v-text="item.lambNo"></td>
                                <td @click.stop="delItem(index)" style="cursor: pointer;color:red;">删除</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="search_city input-group">
                        <input type="text" class="form-control" name="keyword" placeholder="搜索地点"  @keyup.enter ="searchCity()" v-model="cityName">
                        <span class="input-group-addon" style="cursor: pointer" @click.stop="searchCity()"><i class="search_icon"></i></span>
                    </div>
                    <ul class="fault_type">
                        <li><i class="on_incon"></i><span>开灯</span></li>
                        <li><i class="off_incon"></i><span>关灯</span></li>
                        <li><i class="not_incon"></i><span>不全开</span></li>
                        <li><i class="fault_icon"></i><span>故障</span></li>
                        <li><i class="offline_icon"></i><span>离线</span></li>
                    </ul>
                    <div class="map_tap" id="map_tap">
                        <div class="btn_group">
                            <button class="active"  @click.stop="timelyControl()" id="timelyControl">实时控制</button>
                            <button @click.stop="lambList()">单灯信息</button>
                            <button @click.stop ="showLog()">终端日志</button>
                            <a id="close_diar" @click.stop="closeDialog()">X</a>
                        </div>
                        <ul class="content_tap">
                            <li class="cur">
                                <div class="order_operation_btn">
                                    <button type="button" class="primary_btn" style="float: right;padding: 5px 30px;" @click.stop="surOperation">确认</button>
                                </div>
                                <div class="grade_warp" v-for="item in lambListAll">
                                    <div class="User_ratings User_grade">
                                        <div class="left_title">
                                            <h4>灯盏1</h4>
                                            <p><span>状态：开灯<span class="title0" v-text="item.lightStr"></span>%</span></p>
                                        </div>
                                        <div class="ratings_bars">
                                            <p>亮度调节</p>
                                            <div class="scale">
                                                <div class=" bar0"></div>
                                                <span class="btn0"></span>
                                            </div>
                                            <div class="num_info">
                                                <p class="info1">0</p>
                                                <p class="info2">50%</p>
                                                <p class="info3">100%</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="row">
                                    <div class="col-xs-3">
                                        <span class="col-xs-5">单灯名称</span>
                                        <input type="text" class="col-xs-7 input_xs" name="keyword" readonly v-model="info.lightName">
                                    </div>
                                    <div class="col-xs-3">
                                        <span class="col-xs-5">终端编号</span>
                                        <input type="text" class="col-xs-7 input_xs" name="keyword" readonly v-model="info.onenetCode">
                                    </div>
                                    <div class="col-xs-3">
                                        <span class="col-xs-5">控制器类型</span>
                                        <input type="text" class="col-xs-7 input_xs" name="keyword" readonly v-model="info.conCategory">
                                    </div>
                                    <div class="col-xs-3">
                                        <span class="col-xs-5">终端ID</span>
                                        <input type="text" class="col-xs-7 input_xs" name="keyword" readonly >
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-3">
                                        <span class="col-xs-5">单灯状态</span>
                                        <input type="text" class="col-xs-7 input_xs" name="keyword" readonly v-model="info.status">
                                    </div>
                                    <div class="col-xs-3">
                                        <span class="col-xs-5">所属项目</span>
                                        <input type="text" class="col-xs-7 input_xs" name="keyword" readonly v-model="info.proCode">
                                    </div>
                                    <div class="col-xs-3">
                                        <span class="col-xs-5">所属组</span>
                                        <input type="text" class="col-xs-7 input_xs" name="keyword" readonly v-model="info.proName">
                                    </div>
                                    <div class="col-xs-3">
                                        <span class="col-xs-5">维护人</span>
                                        <input type="text" class="col-xs-7 input_xs" name="keyword" readonly v-model="info.cUser">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xs-3">
                                        <span class="col-xs-5">通信状态</span>
                                        <input type="text" class="col-xs-7 input_xs" name="keyword" readonly >
                                    </div>
                                    <div class="col-xs-3">
                                        <span class="col-xs-5">IMEI号</span>
                                        <input type="text" class="col-xs-7 input_xs" name="keyword" readonly  v-model="info.imei">
                                    </div>
                                    <div class="col-xs-3">
                                        <span class="col-xs-5">IMSI号</span>
                                        <input type="text" class="col-xs-7 input_xs" name="keyword" readonly v-model="info.imsi">
                                    </div>
                                </div>
                                 <div class="row">
                                      <div class="col-xs-1" style="padding:0;padding-left:20px;text-align: center">单灯工况</div>
                                      <div class="col-xs-11" style="padding:0px">
                                          <dl class="light_list" v-for="item in itemStateList">
                                              <dd>
                                                  <p v-text="'灯盏' +item.id"></p>
                                                  <div class="row">
                                                      <div class="col-xs-3">
                                                          <span class="col-xs-5">电压（V）</span>
                                                          <input type="text" class="col-xs-7 input_xs" name="keyword" readonly v-model="item.eleV">
                                                      </div>
                                                      <div class="col-xs-3">
                                                          <span class="col-xs-5">电压（A）</span>
                                                          <input type="text" class="col-xs-7 input_xs" name="keyword" readonly v-model="item.eleA">
                                                      </div>
                                                      <div class="col-xs-3">
                                                          <span class="col-xs-5">功率（W）</span>
                                                          <input type="text" class="col-xs-7 input_xs" name="keyword" readonly  v-model="item.eleW">
                                                      </div>
                                                      <div class="col-xs-3">
                                                          <span class="col-xs-5">亮度（100%）</span>
                                                          <input type="text" class="col-xs-7 input_xs" name="keyword" readonly  v-model="item.eleL">
                                                      </div>
                                                  </div>
                                              </dd>
                                          </dl>
                                      </div>
                                 </div>
                            </li>
                            <li>
                                <div class="custom-table-wrapper" style="max-height:400px " id="run-log">
                                    <table class="custom-table run-log-table-hook"></table>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 模态框（Modal） -->
<div id="modal-dialog"  style="display: none">
    <div class="form_control" style="width:90%;padding:30px 20px;margin:0 auto;">
        <input type="text"  class="form-control" value="" id="range_title"  placeholder="输入临时组名称" />
    </div><!-- /.modal-content -->
</div><!-- /.modal -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=gAcDsfWUz7Wx0XzjGGfmVIWA6h2hhnCk"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<!--<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>-->
<script type="text/javascript" src="js/back/runMontior/runMontior.js" custom></script>